/**
 * 应用入口文件
 * 包含应用的核心初始化逻辑和全局提供者配置
 */
import React from 'react'                                        // 导入React核心库，用于创建和管理React组件
import ReactDOM from 'react-dom/client'                          // 导入ReactDOM客户端渲染API，用于将React组件渲染到DOM中
import { Provider } from 'react-redux'                           // Redux状态管理提供者，为整个应用提供状态访问能力
import { PersistGate } from 'redux-persist/integration/react'    // Redux状态持久化组件，允许在页面刷新后恢复状态
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'      // React Query数据请求管理，提供数据获取、缓存和状态管理
import App from './App.tsx'                                      // 导入应用根组件，整个应用的顶层组件
import { store, persistor } from './store'                       // 导入Redux store和持久化存储实例
import 'antd/dist/reset.css'                                     // 导入Ant Design全局样式重置文件
import './index.css'                                             // 导入全局自定义样式
import './styles/theme.css'                                      // 导入主题样式文件，实现亮色/暗色主题切换
import { BrowserRouter } from 'react-router-dom'                 // 导入路由提供者，实现基于浏览器历史的路由
import { ReactQueryDevtools } from '@tanstack/react-query-devtools' // 导入React Query开发工具，便于开发调试
import { initializeUserState } from './store/features/userSlice'  // 导入用户状态初始化action
import { applyLocalStoragePatch, cleanupLocalStorage } from './redux-persist-fix' // 导入Redux-Persist修复工具

// 创建React Query客户端实例
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false, // 窗口聚焦时不重新获取数据
      retry: 1, // 请求失败重试次数
      staleTime: 1000 * 60 * 5, // 数据缓存5分钟
    }
  }
});

/**
 * 应用初始化
 */
// 清理localStorage中可能存在的重复项，确保数据一致性
cleanupLocalStorage();

// 应用localStorage补丁，防止事件循环
applyLocalStoragePatch();

// 初始化用户状态，仅执行一次
store.dispatch(initializeUserState());

// 仅在开发环境下记录初始化信息
if (process.env.NODE_ENV === 'development') {
  console.log('应用初始化完成');
}

/**
 * 渲染应用
 * 使用React 18的createRoot API挂载应用
 * 配置多个全局提供者，从外到内依次为：
 * 1. React.StrictMode - React严格模式，用于捕获潜在问题
 * 2. Redux Provider - 全局状态管理
 * 3. PersistGate - 状态持久化，等待持久化状态恢复
 * 4. QueryClientProvider - API请求管理
 * 5. BrowserRouter - 路由管理
 */
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    {/* Redux状态管理提供者，使整个应用可以访问Redux状态 */}
    <Provider store={store}>
      {/* Redux持久化门，等待持久化数据加载完成再渲染应用 */}
      {/* loading={null}表示加载过程中不显示任何内容 */}
      <PersistGate loading={null} persistor={persistor}>
        {/* React Query提供者，管理API请求状态和缓存 */}
        <QueryClientProvider client={queryClient}>
          {/* 路由提供者，实现页面间的导航 */}
          <BrowserRouter>
            {/* 应用根组件 */}
            <App />
          </BrowserRouter>
          {/* React Query开发工具，仅在开发环境下可见 */}
          {/* initialIsOpen={false}表示初始状态下开发工具是关闭的 */}
          <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
      </PersistGate>
    </Provider>
  </React.StrictMode>,
)